<template>
    <div class="menu" :style=" iscollapse ? 'width:64px':'width:240px'">
        <div class="logobox">
            <img src="../../assets/logo.png" alt="">
            <transition name="slide-fade">
                <h1 v-show="!iscollapse">VUE-Element-Admin</h1>
            </transition>
        </div>
        <el-menu
                active-text-color="#ffd04b"
                background-color="#545c64"
                class="el-menu-vertical-demo"
                default-active="2"
                text-color="#fff"
                router
                :collapse="iscollapse"
                :default-active="activerouter"
        >
            <template  v-for="(item,index) in menuList" :key="index">
                            <el-menu-item :index="item.path" v-if="!item.children">
                                <el-icon> <component :is="item.icon" /> </el-icon>
                                <template #title>{{item.menuName}}</template>
                            </el-menu-item>
                            <submenu v-else :menuitem="item" />
            </template>
        </el-menu>
    </div>
</template>
<script lang="ts">
    import {defineComponent, ref,watch,onMounted} from 'vue';
    import {useStore} from "vuex";
    import submenu from "@/components/Menu/submenu.vue";
    import {useRoute} from "vue-router";
    export default defineComponent({
        name: 'menu',
        props: {  //指定接收的值，必须指定类型
            msg:String,
            iscollapse:Boolean
        },
        components:{submenu},
        setup(props,context) {
            const store = useStore();
            const route = useRoute()
            const activerouter = ref("")

            onMounted(()=>{
                activerouter.value = route.path
            })
            const menuList = ref(store.getters.sideMenu)
            watch(() => store.getters.sideMenu, (newValue, oldValue) => {
                menuList.value = newValue
            })
            return {props,menuList,activerouter};
        },
    });
</script>
<style lang="scss">
    .menu{
        transition: all 0.6s;
    }
    .el-menu{
        border-right: none !important;
    }
    .logobox{
        height: 58px;
        display: flex;
        align-items: center;
        justify-content: center;
        img{
            height: 18px;
            width: 18px;
        }
        h1{
            font-size: 16px;
            color: #fff;
            margin-left: 3px;
            white-space: nowrap;
            overflow: hidden;
        }
    }
    .slide-fade-enter-active {
        transition: all .3s ease;
    }
    .slide-fade-leave-active {
        transition: all .8s cubic-bezier(1.0, 0.5, 0.8, 1.0);
    }
    .slide-fade-enter, .slide-fade-leave-to
        /* .slide-fade-leave-active for below version 2.1.8 */ {
        transform: translateX(10px);
        opacity: 0;
    }
</style>
